<template>
<div class="page">
  <navTop title="企业尽调"></navTop>
	<div class="h10"></div>
	<div class="top_div">5000万家企业经营、创新、融资等分析</div>
	<div class="h10"></div>
	
	<div class="card_div">
		<div class="c_item flex_ac">
			<div class="c_name">名称</div>
			<input class="c_ddd2" type="text" placeholder="请输入您要尽调的企业名称" v-model="company_name" @input="getCompany">
			<div class="xx_xl" v-show="companyList.length>0&&isShowList">
				<div @click="changeCname(item)" class="" v-for="(item,index) in companyList" :key="index">{{item.company_name}}</div>
			</div>
		</div>
		<div class="h40"></div>
		<div class="bg_btn" @click="getBg">
			生成报告
		</div>
		<div class="h20"></div>
	</div>
	
	<div class="h15"></div>
	
	<div class="ccc">
		<div class="c_title">样本预览</div>
		<div class="m_top1">企业无感调查</div>
		<img src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/jdyl0.png" mode="widthFix"></img>
	</div>
</div>
</template>

<script>
import { company } from '@/api/api'
import navTop from '@/components/navTop.vue'

export default{
	data(){
		return{
			company_name:'',
			companyList:[],
			isShowList:false,
			
			index:0,
			type:[
				'企业分析报告',
			],
			time:null,
			list:[],
			need_num:''
		}
	},
  components: {
    navTop
	},
	created(){
	
	},
	methods:{
		getBg(){
			this.toReport()
		},
		getCompany(){
			if(this.time){
				clearTimeout(this.time)
			}
			this.time = setTimeout(()=>{
				this.isShowList = true
				company.getList({keywords:this.company_name}).then(res=>{
					this.companyList = res.data.data
				})
			},500)
		},
		changeCname(i){
			this.company_name = i.company_name
			this.identification = i.identification
			this.isShowList = false
		},
		toReport(){
			if(!this.company_name){
				this.$toast({
					message:'企业名称必须输入',
				})
				return
			}
			if(this.companyList.findIndex(item=>item.company_name==this.company_name)==-1){
				this.$dialog.confirm({
					title:'提示',
					message:'系统检测您的企业名称不完整，请输入完整的企业名称？',
				})
				return
			}
			this.$router.replace({name:'success',query:{type:'report'}})
		}
	}
}
</script>

<style scoped lang="scss">
.page{
	width: 100%;
	height: 100%;
	background: #f5f5f5;
}
.top_div{
	margin: 0 auto;
	width: 345px;
	height: 35px;
	line-height: 35px;
	background: #FA8A2622;
	border-radius: 3px;
	font-size: 12px;
	color: #FA8A26;
	padding: 0 10px;
}
.card_div{
	margin: 0 auto;
	width: 365px;
	background: #FFFFFF;
	border-radius: 3px;
	.c_item{
		height: 55px;
		position: relative;
		border-bottom: 1px solid #f5f5f5;
		.text{
			font-size: 12px;
			color: #999999;
		}
		.c_name{
			font-weight: 600;
			font-size: 14px;
			color: #000000;
			margin-left: 10px;
			margin-right: 30px;
		}
		.c_ddd{
			font-size: 13px;
			color: #999999;
			height: 40px;
			line-height: 40px;
			width: 100%;
		}
		.c_ddd1{
			font-size: 13px;
			color: #333;
			height: 40px;
			line-height: 40px;
			width: calc(100% - 100px);
		}
		.c_ddd2{
			font-size: 13px;
			width: calc(100% - 90px);
      border: none ;
		}
		.xx_xl{
			max-height: 200px;
			overflow-y: auto;
			border-radius: 0 0 4px 4px;
			border: 1px solid #ccc;
			border-top: none;
			background-color: #fff;
			position: absolute;
			right: 0;
			top: 55px;
			z-index: 10;
			width: calc(100% - 60px);
			div{
				padding: 5px 10px;
				color: #333;
				font-size: 13px;
				&:active{
					background:rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
}

.bg_btn{
	margin: 0 auto;
	width: 350px;
	height: 44px;
	line-height: 44px;
	background: #FA8A26;
	border-radius: 5px;
	text-align: center;
	font-weight: bold;
	font-size: 15px;
	color: #FFFFFF;
	cursor: pointer;
}

.ccc{
	width: 355px;
	margin: 0 auto;
	background: rgba(255,255,255,0.8);
	border-radius: 3px;
	position: relative;
	img{
		width: 100%;
	}
	.c_title{
		font-size: 14px;
		color: #000000;
		position: absolute;
		left: 9px;
		top: 15px;
	}
	.c_right{
		width: 80px;
		height: 18px;
		background: rgba(255,122,122,0.15);
		border-radius: 0px 3px 3px 3px;
		font-size: 11px;
		color: #FF7A7A;
		text-align: center;
		line-height: 18px;
		position: absolute;
		right: 0;
		top: 0;
	}
}

.m_top1{
  position: absolute;
  right:0;
  top:0;
  line-height: 18px;
  height: 18px;
  background: rgba(103,194,58,0.1);
  border-radius: 0px 5px 0px 5px;
  padding: 0 8px;
  font-size: 11px;
  color: #67C23A;
}
</style>